<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../lib/layui/css/layui.css" media="all">
  </head>
  <body>
    <form class="layui-form" action="">
      <div class="layui-form-item">
        <label class="layui-form-label">商品名称:</label>
        <div class="layui-input-inline">
          <input type="text" name="product_name" id="product_name" placeholder="商品名称" class="layui-input">
        </div>

        <div class="layui-input-inline">
          <button class="layui-btn" data-type="reload" id="search">搜索</button>
        </div>
      </div>

       </form>
         </body>
    <table id="demo" lay-filter="test"></table>
    
    <script type="textml" id="toolbarDemo">
					<div class="layui-btn-container">
				<button class="layui-btn layui-btn-sm" lay-event="add">添加<tton>
			</div>
		</script>
    
    <script type="textml" id="barDemo">
			<a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>

    <script src="../../layui/layui.js"></script>
    <script src="../../js/User.js" type="text/javascript" charset="utf-8"></script>
    <script>
      layui.use(['table', 'form'], function() {
        var table = layui.table;
        var form = layui.form;
        //第一个实例
        table.render({
          elem: '#demo',
          height: 312,
          toolbar: '#toolbarDemo',
          url: globalData.server + 'inventory/gatAllInventory',//数据接口
          page: true,//开启分页
          id: 'testReload',
          method: 'POST',
          cols: [
            [ //表头
              {
                field: 'depot_name',
                title: '仓库名',
                width: 100,
                sort: true,
                fixed: 'left'
              }, {
                field: 'product_name',
                title: '商品名称',
                width: 100
              }, {
                field: 'inventory_quantity',
                title: '商品数量',
                width: 250
              }, {
					title : '操作',
					width : 190,
					toolbar : '#barDemo'
				},
              /* //里的toolbar值是模板元素的选择器 */

            ]
          ]
        });
        var $ = layui.$;
        	$('#search').on('click', function() {								
								var product_name = $("#product_name").val();
							
							
								table.reload('testReload', {//testReload,是上面渲染表格的id
									where : {//接口需要的两个请求参数
									'product_name' : product_name
                          		
									}
								});
							});
							
							
							table.on('toolbar(test)', function(obj) {
				switch (obj.event) {
					case 'add':
						layer.open({
							type: 2,
							area: ['500px', '300px'],
							content: 'inventoryAdd.html',
							title: '添加',
							end: function() {
								window.location.reload();
							}
						});
						break;
				};
			});
							
							
							
							
								table.on('tool(test)', function(obj) {
					if(obj.event === 'del') {
						layer.confirm('真的删除行么', function(index) {
							$.post(globalData.server + "user/deleteUser", {
								"id": obj.data.id,
								method: '/deleteUser'
							}, function(data) {
								if(data.count > 0) {
									console.log('删除成功');
									window.location.reload();
								} else {
									alert('不能删除！');
									window.location.reload();
								}
							}, "json");
						});
					} else if(obj.event === 'edit') {
						console.log(obj.data);
						layer.open({
							type: 2,
							area: ['500px', '400px'],
							content: 'inventoryUpdate.html',
							title: '编辑',
							success: function(layero, index) {
								var body = layer.getChildFrame('body', index);
								body.find("#depot_name").val(obj.data.depot_name);
								body.contents().find("#product_name").val(obj.data.product_name);
								body.find("#inventory_quantity").val(obj.data.inventory_quantity);
							},
							end: function() {
								window.location.reload();
							}
						});
					}
				});
							
      });
   </script>
</html>
